<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname">
  </div>
</template>

<script>
export default {
  data () {
    return {
      uname:'zhangsan',
      dog: {
        name:'旺财',
        age:'2'
      }
    }
  },
  // 侦听器， 要写到和data 平级的 watch 里面
  watch: {
    // 1.---------函数写法-----------
    // uname (newVal,oldVal) {
    //   console.log(newVal,oldVal)
    // } ,
    // 2.-------对象写法------------
    uname: {
      handler(newVal,oldVal) {     //第一个形参新的   第二个旧的，不需要旧的可以不写
        // 写对象格式hander 必须写，名字固定
        console.log(newVal,oldVal)
      },
      immediate:true  //加入这个属性立即侦听(通俗的说，打开页面立即执行)
    },
    // dog: {
    //   handler(newVal) {
    //     console.log(newVal)
    //   },
    //   deep:true //深度侦听，用于侦听对象属性变化
    // },

    //---------只侦听对象的某个属性--------------
    'dog.age'(newVal){
      console.log(newVal)
    }
  }

}
</script>

<style>

</style>